<template>
    <div class="header-box">
        <div class="collapse-box" @click="changeCollapseFn" >           
            <el-icon>
                <component :is="isCollapse?Fold:Expand"></component>                
                <!-- <Fold /><el-icon><Expand /></el-icon> -->
            </el-icon>
        </div>
    </div>
</template>
<script lang="ts" setup>
    import {useStore} from 'vuex'
    import {ref} from 'vue'    
    import {Expand,Fold} from '@element-plus/icons-vue'
    const store = useStore()    
    const props = withDefaults(defineProps<Props>(),{
        isCollapse: false
    })
    const emit = defineEmits<{
        (e:'changeCollapseFn', isCollapse:boolean):void
    }>()
    let isCollapse = ref(false)
    isCollapse = ref(props.isCollapse )
    function changeCollapseFn(){        
        store.dispatch('changeCollapse')
        isCollapse.value = !isCollapse.value
        emit('changeCollapseFn',isCollapse.value)
    }
    interface Props{
        isCollapse?: boolean
    }
   

</script>
<style lang="scss" scoped>
    .header-box{
        height: 100%;
        display: flex;
        background: #8284fa;
        align-items: center;
        &>.collapse-box{
            font-size: 30px;
            display: flex;
            align-items: center;      
            cursor: pointer;      
        }
    }
</style>